<template>

	<view class="u-p-28">
		<u-form  :model="form" label-width="120" label-align="center" ref="formEl">

			<u-form-item label="账号:" prop="userName" v-if="update">
				<u-input v-model="form.userName" disabled border placeholder="请输入服务员账户"></u-input>
			</u-form-item>

			<u-form-item label="姓名:" prop="fullName">
				<u-input v-model="form.fullName" border placeholder="请输入服务员姓名"></u-input>
			</u-form-item>

			<u-form-item label="昵称:" prop="nickName" v-if="update">
				<u-input v-model="form.nickName" border placeholder="请输入" type="number"></u-input>
			</u-form-item>

			<u-form-item label="性别">
				<u-radio-group v-model="form.sex" active-color="#ffc300">
					<u-radio :name="1">男</u-radio>
					<u-radio :name="2">女</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="手机号:" prop="phone">
				<u-input v-model="form.phone" border placeholder="请输入服务员手机号" type="number"></u-input>
			</u-form-item>

			<u-form-item label="部门:" prop="departId">
				<u-input v-model="businItem" border placeholder="请选择部门" type="select" disabled
					@click="businShow = true"></u-input>
			</u-form-item>



			<u-form-item>
				<u-button ripple type="warning" :custom-style="indexHooks.custmStyle()" @click="add">添加</u-button>
			</u-form-item>
		</u-form>
	</view>

<!-- 部门选择器 -->
	<u-select v-model="businShow" :list="busineList" label-name="departName" value-name="departId" title="选择部门"
		@confirm="selectBusin"></u-select>

</template>

<script setup>
	import {
		computed,
		onUpdated,
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import * as indexHooks from '@/hooks/index'
	import waitersApi from '@/api/waiters'
	const formEl = ref(null)
	import {copyObjectWithInclusion} from '@/utils/index'


	onReady(() => {
		formEl.value.setRules(formRules)
		getBusiness()
	})

	onLoad((e)=>{

		if(e.waiterId){

			waitersApi.waiterInfo(e).then(res=>{
				let obj = res.data
				const includedKeys = ['userName', 'fullName', 'nickName', 'phone', 'sex','departId','waiterId'];
				const result = copyObjectWithInclusion(obj, includedKeys);
				Object.assign(form,result)
				// Object.assign(form,result,e)
				// let list = []
				// for(let key in form){
				// 	list.push(key)
				// }
				// const result = copyObjectWithInclusion(res.data,list)
				// Object.assign(form,result,e)
			})
		}else{
			form.takeOrdersWay = 1
		}
		if(e.update){
			update.value = true
		}
	})

	const update  = ref(false)
	const businShow = ref(false)
	const form = reactive({
		waiterType: 1,
		userName: '',
		fullName: '',
		nickName: '',
		phone: '',
		departId: '',
		sex: 1,
		takeOrdersWay:''
	})

	const busineList = ref([])
	const getBusiness = () => {//获取部门列表
		waitersApi.getBusinessDepart().then(res => {
			let list = res.data
			let nwelist = fun(list)
			function fun(nodes = [], arr = []) {
				for (let item of nodes) {
					arr.push(item);
					if (item.children && item.children.length) {
						fun(item.children, arr);
					}
				}
				return arr
			}
			busineList.value = nwelist.filter(item => item.power != 0)
		})
	}
	const formRules = reactive({
		// userName: {
		// 	required: true,
		// 	message: '请输入账户',
		// 	trigger: ['blur', 'change'],
		// },
		fullName: {
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		},
		age: {
			required: true,
			message: '请输入年龄',
			trigger: ['blur', 'change'],
		},
		phone: [
			{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change'],
			},
			{
				min: 11,
				max: 11,
				message: '请输入11位手机号',
				trigger: ['blur', 'change'],
			}
		]
	})


	const selectBusin = (e) => {//选择部门
		form.departId = e[0].value
	}


	const businItem = computed(() => {
		return busineList.value.find(item => item.departId === form.departId)?.departName
	})

	const add = () => {//新增服务员
		formEl.value.validate(valid => {
			if (valid) {
				if(form.departId===""){
					return uni.showToast({
						title:'请选择部门',
						icon:'none'
					})
				}

				if(update.value){
					waitersApi.editWaiter(form).then(res=>{
						uni.showToast({
							title:res.msg,

						})
					})

				}else{
					waitersApi.addWaiter(form).then(res=>{
						uni.showToast({
							title:res.msg,

						})
					})
				}



			}
		})
	}

</script>

<style>
</style>
